<template>
  <div class="user-info">
    <Navbar
      :back="true"
      title="个人信息"
      bg="transparent"
      color="var(--background-from)"
    />
    <div class="user-info__container">
      <div class="user-info__avatar">
        <img src="@/assets/image/user.png" alt="" />
      </div>
      <!-- 用户修改信息组件 -->
      <div class="user-info__content">
        <van-cell-group inset>
          <template #error-message></template>
          <van-field
            :readonly="changeFlag"
            v-model="userInfo.username"
            label="姓名"
          />
          <van-field
            :readonly="changeFlag"
            v-model="userInfo.phone"
            type="tel"
            label="手机号"
          />
          <van-field
            :readonly="changeFlag"
            v-model="userInfo.email"
            type="email"
            label="邮箱"
          />
          <van-field
            disabled
            v-model="userInfo.password"
            type="password"
            label="密码"
          />
        </van-cell-group>
      </div>
      <van-button
        class="shadow"
        @click="hadleSubmit"
        round
        color="#ffcd41"
        block
        type="primary"
      >
        {{ changeFlag ? "编辑信息" : "确认修改" }}
      </van-button>
      <van-button
        class="shadow1"
        v-show="!changeFlag"
        @click="handleCancel"
        round
        color="#ffcd41"
        block
        type="primary"
      >
        取消修改
      </van-button>
      <span class="exit" @click="popupShow = true">修改密码</span>
    </div>
    <PasswordPopup v-model:popupShow="popupShow" v-model:userInfo="userInfo" />
  </div>
</template>
<script setup lang="ts">
import Navbar from "@/components/Navbar.vue";
// 引入修改密码组件
import PasswordPopup from "./components/PasswordPopup.vue";
// 引入vant弹窗组件
import { showConfirmDialog } from "vant";
// 引入vant弹窗组件和轻提示样式
import "vant/es/toast/style";
import "vant/es/dialog/style";
// 引入修改用户信息接口
import { putUserInfo } from "@/api";
// 引入vue响应式
import { ref, reactive } from "vue";
// 引入用户信息ts类型
import { UserType } from "@/api";
// 获取本地存储的用户信息
const localUserInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");
// 定义用户信息响应式对象
let userInfo = reactive<UserType>(localUserInfo);
// 修改用户信息状态
const changeFlag = ref(true);
// 密码组件状态
const popupShow = ref(false);
// 取消修改信息逻辑
function handleCancel() {
  showConfirmDialog({
    title: "提示",
    message: "确认取消修改信息？",
    confirmButtonColor: "#ffcd41",
  }).then(() => {
    changeFlag.value = !changeFlag.value;
    userInfo = localUserInfo;
  });
}
// 确认修改信息逻辑
function hadleSubmit() {
  showConfirmDialog({
    title: "提示",
    message: changeFlag.value ? "确认编辑信息？" : "确认修改信息？",
    confirmButtonColor: "#ffcd41",
  }).then(() => {
    if (!changeFlag.value) {
      putUserInfo(userInfo).then((res) => {
        localStorage.setItem("userInfo", JSON.stringify(userInfo));
        localStorage.setItem("token", userInfo.username);
      });
    }
    changeFlag.value = !changeFlag.value;
  });
}
</script>
<style lang="scss">
// var() 为主题设置的动态颜色
.user-info {
  .van-cell {
    background-color: var(--background-color);
  }

  .van-cell__title,
  .van-field__control {
    color: var(--font-color);
  }

  background: linear-gradient(
    to bottom,
    var(--background-from),
    var(--background-to)
  );
  font-size: 16rem;
  color: var(--font-color);

  &__container {
    height: calc(100vh - 77rem);
    @include flex(column, center);
  }

  &__avatar {
    height: 96rem;
    width: 96rem;
    border-radius: 50%;
    margin-top: 10rem;
    overflow: hidden;
    border: rgb(255, 223, 201) 6rem solid;

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  &__content {
    width: 100%;
    box-sizing: border-box;
    padding: 38rem 20rem 0;
  }

  .shadow {
    margin-top: 30rem;
    width: 300rem;
  }

  .shadow1 {
    margin-top: 10rem;
    width: 300rem;
  }

  .exit {
    font-size: 12rem;
    text-decoration: underline;
    margin-top: 10rem;
    color: $color-yellow;
  }
}
</style>
